<template>
	<view class="main">
		<!-- 公共头部 -->
		<headerPublic style="position: fixed;" title="会议室状态" />
		<view class="top-part outbottom">
			<!-- 左右切换按钮和日期显示 -->
			<view class="date-picker-container">
				<view class="date-picker-btn" @click="prevDay">
					<image src="/static/arrow-left.png" class="arrowImg"></image>
				</view>
				<view class="date-picker-display" @click="openPicker(0)">
					{{ dateCondition }}
				</view>
				<view class="date-picker-btn" @click="nextDay">
					<image src="/static/arrow-right.png" class="arrowImg"></image>
				</view>
			</view>
		</view>

		<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoadList">
			<view class="list-card" v-for="item, index in list" :key="index">
				<view class="list-card-header">
					<view>
						<van-tag v-if="item.isOccupy == '1'" plain size="large" type="danger">有预定</van-tag>
						<van-tag v-else plain size="large" type="success">无预定</van-tag>
					</view>
				</view>
				<view class="list-card-content">
					<text>{{ item.meetName }}</text><!-- + "(" + '房间号：' + item.meetId + ")" -->
					<view class="list-card-content-desc">
						<p><span>会议场地：</span>{{ item.site }}</p>
						<!-- <p><span>会议室容量：</span>{{ item.numPeople }}</p> -->
						<p><span>开放时间：</span>{{ item.beginTime + "~" + item.endTime }}</p>
						<p><span>房间号：</span>{{ item.meetId }}</p>
					</view>
				</view>
				<van-divider :hairline="false" style="margin: 10px 0;" />
				<view class="list-card-footer">
					<van-button class="list-card-footer-button" color="#2D75D7" round size="small"
						@click="goToDetail(item)">立即查看</van-button>
					<!-- <van-button class="list-card-footer-button" style="border:1px solid #2D75D7;color:#2D75D7" round
						size="small" @click="downloadFileFn(item)">下载</van-button> -->
				</view>
			</view>
		</van-list>

		<van-popup v-model:show="showPicker" position="bottom">
			<van-datetime-picker v-model="currentDate" type="date" :title="pickerTitle" @confirm="onConfirm"
				:min-date="minDate" />
		</van-popup>
	</view>
</template>

<script>
	import {
		hyapList,
		roomList,
		downLoadM
	} from '../../../api'
	import {
		downloadFile
	} from '@/utils/public.js';
	import {
		parseTime
	} from '../../../utils/format'
	export default {
		data() {
			return {
				searchWord: '',
				loading: false,
				finished: false,
				showPicker: false,
				list: [],
				pickerTitle: '',
				currentDate: new Date(), // 初始化 currentDate 为当前日期
				dateCondition: parseTime(new Date(), '{y}-{m}-{d}'),
				minDate: new Date(2025, 0, 1),
			}
		},
		methods: {
			downloadFileFn(info) {
				let url = `/app/bus/meetingRoom/export?dateCondition=${this.dateCondition}&meetingId=${info.id}`
				downloadFile(url, info.meetName);
			},
			// 封装下载工具函数
			// downloadFile(url, fileName) {
			//   // 判断平台
			//   const platform = uni.getSystemInfoSync().platform;

			//   if (platform === 'h5') {
			//     // H5 平台通过 a 标签下载
			//     const link = document.createElement('a');
			//     link.href = url;
			//     link.download = fileName || url.split('/').pop();
			//     document.body.appendChild(link);
			//     link.click();
			//     document.body.removeChild(link);
			//   } else {
			//     // App/小程序平台：下载 + 保存
			//     uni.downloadFile({
			//       url: url,
			//       success: (downloadRes) => {
			//         if (downloadRes.statusCode === 200) {
			//           uni.saveFile({
			//             tempFilePath: downloadRes.tempFilePath,
			//             success: (saveRes) => {
			//               uni.showToast({
			//                 title: `保存成功：${saveRes.savedFilePath}`,
			//                 icon: 'none'
			//               });
			//             },
			//             fail: () => uni.showToast({ title: '保存失败', icon: 'none' })
			//           });
			//         } else {
			//           uni.showToast({ title: '下载失败', icon: 'none' });
			//         }
			//       },
			//       fail: () => uni.showToast({ title: '请求失败', icon: 'none' })
			//     });
			//   }
			// },
			// downMeet(info){
			// 	let url = `/app/bus/meetingRoom/export?dateCondition=${this.dateCondition}&meetingId=${info.id}`
			// 	this.downloadFile(url,'fileName')
			// 	// downLoadM({
			// 	// 	dateCondition:this.dateCondition,
			// 	// 	meetingId: info.id
			// 	// }).thrn(res => {
			// 	// 	console.log(res);
			// 	// })

			// },
			onLoadList() {
				const params = {
					pageNum: 1,
					pageSize: 99,
					dateCondition: this.dateCondition,
					status: 1
				}
				roomList(params).then(res => {
					this.list = res.data.rows
					console.log(this.list)
					this.loading = false
					this.finished = true
				})
			},
			prevDay() {
				this.currentDate = new Date(this.currentDate.getTime() - 24 * 60 * 60 * 1000);
				this.dateCondition = parseTime(this.currentDate, '{y}-{m}-{d}');
				this.onLoadList();
			},
			nextDay() {
				this.currentDate = new Date(this.currentDate.getTime() + 24 * 60 * 60 * 1000);
				this.dateCondition = parseTime(this.currentDate, '{y}-{m}-{d}');
				this.onLoadList();
			},
			openPicker(type) {
				if (type == 0) {
					this.pickerTitle = '选择日期';
				}
				this.showPicker = true;
			},
			onConfirm() {
				this.dateCondition = parseTime(this.currentDate, '{y}-{m}-{d}');
				this.showPicker = false;
				this.onLoadList();
			},
			goToDetail(item) {
				uni.navigateTo({
					url: `/pages/meeting/status/detail?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.arrowImg {
		width: 15.34px;
		height: 15.34px;
	}

	.date-picker-container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px;
		padding-top: 30px;
		// border: 1px solid #ddd;
		border-radius: 5px;
		width: 100%;
	}

	.date-picker-btn {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.date-picker-display {
		flex: 2;
		text-align: center;
		font-size: 16px;
		padding: 14px;
		background-color: #fff;
	}

	::v-deep .van-tag--success {
		background: #DDFFD4;
	}

	::v-deep .van-tag--danger {
		background: #FFE5E5;
	}

	.main {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.top-part {
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		box-sizing: border-box;
		padding: 0 12px;
		// background-color: #fff;
	}

	.list-card {
		background-color: #fff;
		margin: 15px;
		padding: 15px;
		border-radius: 5px;

		&-header {
			display: flex;
			flex-direction: row-reverse;
		}

		&-content {
			text {
				font-size: 18px;
				font-weight: bold;
				padding-bottom: 10px;
			}

			&-desc {
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				flex-wrap: wrap;
				width: 90%;
				margin-top: 13px;

				p {
					line-height: 26px;
					font-size: 14px;

					span {
						color: #999999;
					}
				}
			}
		}

		&-footer {
			display: flex;
			flex-direction: row-reverse;

			&-button {
				height: 26px;
				width: 80px;
				margin-left: 10px;
			}
		}
	}

	.fixed {
		position: fixed;
		bottom: 60px;
		right: 20px;

		&-button {
			color: white;
			background: rgb(45, 117, 215);
			border-color: rgb(45, 117, 215);
			box-shadow: 3px 3px 5px black;
			height: 60px;
			width: 60px;
		}
	}

	.outbottom {
		margin-top: 88rpx;
	}
</style>